<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/ajax.js"></script>
    <script src="/html/js/util.js"></script>
    <link rel="stylesheet" href="index.css">
    <script>
        let topic=null;
        let topicId = 0;
        window.onload=function (){
            topicId=getQuery("topicId");
            findById(topicId);
        }
        async function findById(id){
            $("replyDiv").innerHTML = null;
            info = await ajaxGet("/topic/findById",{id});
            topic = info;
            let str = "";
            str+=` <div class="navigation">
                        <a style="margin-left: 10px ;font-size: 13px" href="javascript:showMain()">我的论坛</a> ->
                        <span id="whichTheme" style="font-size: 13px"></span>
                    </div>`;
            str+=`<div class="commentHeadDiv" style="margin-top: 5px">
                         <span style="margin-left: 10px;color: white ;font-size: 14px">主题：${info.name}</span></div>
                  <div class="commentDiv" style="overflow: hidden" >
                        <div class="replyUserDiv" >
                             <br>
                             <span>楼主：${info.author}</span><br>
                             <img src="${info.user.imgPath}"><br>
                             <span>注册日期：${info.user.date}</span>
                       </div>
                       <div class="infoDiv" style="overflow-y: auto;">
                            <span>主题：${info.name}@${info.date}</span>
                            <hr>
                            <p style="font-size: 13px">&emsp;&emsp;${info.info}</p>
                       </div>
                  </div>`;
            for (let i = 0 ;i<info.rList.length;i++){
                let obj = info.rList[i];
                str+= `<div class="commentHeadDiv">
                         <span style="margin-left: 10px;color: white ;font-size: 14px">标题：${obj.name}</span>
                  </div>
                  <div class="commentDiv" style="overflow: hidden" >
                        <div class="replyUserDiv" >
                             <br>
                             <span>${i+1}楼：${obj.user.name}</span><br>
                             <img src="${obj.user.imgPath}"><br>
                             <span>注册日期：${obj.user.date}</span>
                       </div>
                       <div class="infoDiv" style=" overflow-y: auto; ">
                             <span>标题：${obj.name}@${obj.date}</span>
                            <hr>
                            <p style="font-size: 13px">&emsp;&emsp;${obj.info}</p>
                       </div>
                  </div>`;
            }
            str += `<div id="writeDiv">
                        <div class="commentHeadDiv">
                    <span style="color: white;margin-left: 365px">回复</span>
                </div>
                    <span style="margin-left: 10px">标题：</span><input type="text" id="replyInput"><br>
                    <span style="margin-left: 10px" >内容：</span><br>
                    <textarea id="replyInfo" style="max-width:650px;max-height:140px;
                    min-width:650px;min-height:140px; margin-left: 10px"></textarea>
                <div class="commentHeadDiv" style="height: 25px;">
                    <input  type="button" value="回复" style="margin-left: 300px" onclick="reply()">
                    <input  type="button" value="重置" style="margin-left: 50px" onclick="removeAll()">
                    <input  type="button" value="预览" style="margin-left: 50px" >
            </div>
            </div>`;
            $("replyDiv").innerHTML = str;
            $("whichTheme").innerHTML = await findNameByThemeId(id);
            }
    </script>
</head>
<body>
<div id="replyDiv"></div>
</body>
</html>